import { Select } from 'antd';

import mouseMiddleClickIcon from './images/mouse-middle-click.svg';
import mouseLeftMiddleShortIcon from './images/mouse-left-middle-short.svg';
import mouseLeftMiddleLongIcon from './images/mouse-left-middle-long.svg';
import mouseMiddleMoveIcon from './images/mouse-middle-move.svg';
import mouseMiddleRightClickIcon from './images/mouse-middle-right-click.svg';
import mouseRightClickIcon from './images/mouse-right-click.svg';
import mouseMiddleRightShortIcon from './images/mouse-middle-right-short.svg';
import mouseMiddleRightLongIcon from './images/mouse-middle-right-long.svg';
// 导入鼠标操作图标
import ctrlIcon from './images/ctrl.svg';
import shiftIcon from './images/shift.svg';

const keyIconMap: Record<string, string> = {
  CTRL: ctrlIcon,
  SHIFT: shiftIcon,
};

const mouseOperationDetails: Record<string, { icon: string; label: string }> = {
  'mouse-middle-click': { icon: mouseMiddleClickIcon, label: '中键点击' },
  'mouse-left-middle-short': {
    icon: mouseLeftMiddleShortIcon,
    label: '左中短按',
  },
  'mouse-left-middle-long': {
    icon: mouseLeftMiddleLongIcon,
    label: '左中长按',
  },
  'mouse-middle-move': { icon: mouseMiddleMoveIcon, label: '中键移动' },
  'mouse-right-click': { icon: mouseRightClickIcon, label: '右键点击' },
  'mouse-middle-right-click': {
    icon: mouseMiddleRightClickIcon,
    label: '中右键点击',
  },
  'mouse-middle-right-short': {
    icon: mouseMiddleRightShortIcon,
    label: '中右短按',
  },
  'mouse-middle-right-long': {
    icon: mouseMiddleRightLongIcon,
    label: '中右长按',
  },
};

interface Props {
  operation: CmdSettingSpace.OperationType;
  label: string;
  isCustom: boolean;
  config: CmdSettingSpace.Operation;
  updateCustomConfig: (
    operation: CmdSettingSpace.OperationType,
    type: 'key' | 'mouse',
    value: string,
  ) => void;
  mouseOptions: string[];
}

export const OperationConfigItem: React.FC<Props> = ({
  operation,
  label,
  isCustom,
  config,
  updateCustomConfig,
  mouseOptions,
}) => {
  return (
    <div className='flex items-center justify-between gap-5 pr-5'>
      <div className='w-20 text-sm text-gray-800'>{label}</div>
      {isCustom ? (
        <div className='flex items-center gap-2'>
          <Select
            value={config.key}
            style={{ width: 100 }}
            onChange={(value) => updateCustomConfig(operation, 'key', value)}
            options={[
              { value: '', label: '无' },
              { value: 'CTRL', label: 'CTRL' },
              { value: 'SHIFT', label: 'SHIFT' },
              { value: 'ALT', label: 'ALT' },
            ]}
          />
          <Select
            value={config.mouse}
            style={{ width: 70 }}
            onChange={(value) => updateCustomConfig(operation, 'mouse', value)}
          >
            {mouseOptions.map((mouseType) => (
              <Select.Option
                key={mouseType}
                value={mouseType}
                title={mouseOperationDetails[mouseType]?.label}
              >
                <div className='flex items-center gap-2'>
                  <img
                    className='w-5 h-5'
                    src={mouseOperationDetails[mouseType]?.icon}
                    alt={mouseOperationDetails[mouseType]?.label}
                  />
                </div>
              </Select.Option>
            ))}
          </Select>
        </div>
      ) : (
        <div className='flex items-center justify-end gap-2'>
          {config.key && keyIconMap[config.key] && (
            <>
              <img
                className='h-8'
                src={keyIconMap[config.key]}
                alt={config.key}
              />
              <span className='text-base text-gray-500'>+</span>
            </>
          )}
          <img
            className='h-8'
            src={mouseOperationDetails[config.mouse]?.icon}
            alt='鼠标操作'
          />
          {config.mouseSecond && (
            <>
              <span className='text-base text-gray-500'>或</span>
              <img
                className='h-8'
                src={mouseOperationDetails[config.mouseSecond]?.icon}
                alt='鼠标操作'
              />
            </>
          )}
        </div>
      )}
    </div>
  );
};
